<template>
	<view class="editpassword">
		<view class="main">
<!-- 			<view class="userinfo">
				<view class="name">{{userInfo.username}}</view>
				<view class="company">{{userInfo.depName}}</view>
				<view class="phone">
					<u-icon name="phone"></u-icon>
					{{userInfo.phone}}
				</view>
			</view> -->
			<view class="editForm">
				<u-form :model="form" ref="uForm" class='form'>
					<u-form-item label="旧密码" label-width="130" prop="oldpassword">
						<u-input type="password" placeholder="请输入旧密码" v-model="form.oldpassword"></u-input>
					</u-form-item>
					<u-form-item label="新密码" label-width="130" prop="newpassword">
						<u-input type="password" placeholder="请输入新密码" v-model="form.newpassword"></u-input>
					</u-form-item>
					<u-form-item label="再次输入" label-width="130" prop="passwordAgain">
						<u-input type="password" placeholder="请再次输入新密码" v-model="form.passwordAgain"></u-input>
					</u-form-item>
					<u-form-item>
						<u-button type="primary" class="edit" @tap="editForm">修改</u-button>
					</u-form-item>
				</u-form>
			</view>
		</view>

	</view>
</template>

<script>
	import { updateUser } from "@/api/user.js"
	export default {
		data() {
			return {
				form: {
					action: 'password',
					newpassword: null,
					oldpassword: null, //旧密码
					passwordAgain: null, //再次输入的密码
				},
				userInfo: null, // 用户的信息
				nowOldPass: null, //登陆的时候的密码
				rules: {
					oldpassword: [{
							required: true,
							message: '请输入旧密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (parseInt(value) === parseInt(this.nowOldPass)) {
									return true
								} else {
									return false
								}
							},
							message: '旧密码不正确',
							trigger: 'blur'
						}
					],
					newpassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '密码不能少于6个字符',
							trigger: 'blur'
						},
						{
							max: 16,
							message: '密码不能大于16个字符',
							trigger: 'blur'
						}
					],
					passwordAgain: [{
							required: true,
							message: '请再次输入新密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (this.form.newpassword === this.form.passwordAgain) {
									return true
								} else {
									return false
								}
							},
							message: '两次密码不一致，请检查',
							trigger: 'blur'
						}
					]

				}
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('user')
			// console.log(this.userInfo)
			this.nowOldPass = uni.getStorageSync('password')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			editForm() {
				this.$refs.uForm.validate(val => {
					if (val) {
						// delete this.form.passwordAgain
						console.log(this.form)
						uni.showModal({
							title: '提示',
							content: '是否修改密码？',
							success: res => {
								if (res.confirm) {
									// 发起修改请求
									updateUser(this.userInfo.id , this.form).then(res =>{
										console.log(res)
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									})
									// 

									setTimeout(() => {
										uni.showModal({
											title: '提示',
											content: '密码已经修改，请重新登录',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													// console.log('用户点击确定');
													uni.navigateTo({
														url: '/pages/index/index'
													})
												} else if (res.cancel) {
													// console.log('用户点击取消');
													return
												}
											}
										});
									}, 1000)

								} else if (res.cancel) {
									// console.log('用户点击取消');
									uni.showToast({
										title: "已取消",
										icon: 'none'
									})
									return
								}
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		padding: 100rpx 0;
		// justify-content: space-around;
		height: 90%;
	}

	.editpassword {
		// background-image: url(../../../../static/mybg.png);
		height: 100%;
		// background-color: #5C92FF;
		background-size: 100%;
		padding: 0 30rpx;

		.userinfo {
			height: 400rpx;
			border: 1px solid #00ffff;
			border-radius: 10rpx;
			// margin-bottom: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			text-align: center;

			.name {
				font-size: 50rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 60rpx;
				letter-spacing: 2rpx;
				color: #ffffff;
				margin-top: 40rpx;
				font-weight: bold;
			}

			.company {
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 60rpx;
				letter-spacing: 1px;
				color: #ffffff;
			}

			.phone {
				font-size: 36rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 60rpx;
				letter-spacing: 1px;
				color: #ffffff;
			}
		}

		.form {
			background-color: white;
			opacity: .8;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.edit {
				width: 100%;
			}
		}
	}
</style>
